// 几何体划分定点组设置不同材质
// threejs中多材质渲染机制中对集合体的顶点组划分 
import { useEffect } from 'react'
import * as THREE from 'three'
import './App.css'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
function App() {

    useEffect(() => {
        // 创建场景
        const scene = new THREE.Scene()
        // 创建相机
        const camera = new THREE.PerspectiveCamera(
            45,//相机的角度
            window.innerWidth / window.innerHeight,//相机的宽高比
            0.1,//相机的近截面
            1000//相机的远截面
        )
        // 创建渲染器
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)//设置渲染尺寸
        document.body.appendChild(renderer.domElement)//将渲染器添加到文档中

        // ----------------------------------------------------main------------------------------------------------------------------------------------
        // 创建几何体

        const geometry1 = new THREE.BoxGeometry(1, 1, 1)

        const s1material = new THREE.MeshBasicMaterial({
            color: 0x00ff00,
            side: THREE.DoubleSide
        })
        const s2material = new THREE.MeshBasicMaterial({
            color: 0x00ffff,
            side: THREE.DoubleSide
        })
        const s3material = new THREE.MeshBasicMaterial({
            color: 0xff0000,
            side: THREE.DoubleSide
        })
        const s4material = new THREE.MeshBasicMaterial({
            color: 0x00ffff,
            side: THREE.DoubleSide
        })
        const s5material = new THREE.MeshBasicMaterial({
            color: 0xffff00,
            side: THREE.DoubleSide
        })
        const s6material = new THREE.MeshBasicMaterial({
            color: 0xffff00,
            side: THREE.DoubleSide
        })
        const scube = new THREE.Mesh(geometry1, [s1material, s2material, s3material, s4material, s5material, s6material])
        scene.add(scube)
        scube.position.x = 2

        // ----------------------------------------------------main------------------------------------------------------------------------------------
        const geometry = new THREE.BufferGeometry()
        // 使用索引绘制
        const vertices = new Float32Array([
            -1.0, -1.0, 0.0,
            1.0, -1.0, 0.0,
            1.0, 1.0, 0.0,
            -1.0, 1.0, 0.0,
        ])
        // 创建顶点属性
        geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3))
        // 创建索引
        const indices = new Uint16Array([0, 1, 2, 0, 2, 3])
        // 创建索引属性
        geometry.setIndex(new THREE.BufferAttribute(indices, 1))

        // 设置两个顶点组 形成2个材质
        // 参数为 起始索引 数量 材质索引
        // 给 geometry 的 索引数组（index buffer） 的一段区间，指定一个 材质编号。
        geometry.addGroup(0, 3, 0)
        geometry.addGroup(3, 3, 1)

        // 创建材质
        const material = new THREE.MeshBasicMaterial({
            color: 0x00ff00,
            side: THREE.DoubleSide
        })
        const material1 = new THREE.MeshBasicMaterial({
            color: 0xff0000,
            side: THREE.DoubleSide
        })

        // 创建物体
        const cube = new THREE.Mesh(geometry, [material, material1])
        cube.position.set(0, 0, 0)
        // 将物体添加到场景中
        scene.add(cube)

        // 设置相机位置
        camera.position.z = 5
        camera.position.y = 2
        camera.position.x = 2
        camera.lookAt(0, 0, 0)

        // 添加世界坐标辅助器
        const axesHelper = new THREE.AxesHelper(5)
        scene.add(axesHelper)

        // 创建轨道控制器
        const controls = new OrbitControls(camera, renderer.domElement)
        // 阻尼
        controls.enableDamping = true
        // 旋转
        controls.enableRotate = true
        // 缩放
        controls.enableZoom = true
        // 设置阻尼系数
        controls.dampingFactor = 0.05
        // 渲染
        renderer.render(scene, camera)

        // 渲染函数
        function animate() {
            // requestAnimationFrame是浏览器用于定时循环的一个函数，它告诉浏览器你希望执行一个动画，并且请求浏览器在下次重绘之前调用指定的函数来更新动画。
            requestAnimationFrame(animate)
            // 更新轨道控制器
            controls.update()
            renderer.render(scene, camera)
        }
        // 调用渲染函数
        animate()

        // 监听窗口变化
        window.addEventListener('resize', () => {
            // 更新相机
            camera.aspect = window.innerWidth / window.innerHeight
            camera.updateProjectionMatrix()
            // 更新渲染器
            renderer.setSize(window.innerWidth, window.innerHeight)
            renderer.setPixelRatio(window.devicePixelRatio)
        })
    }, [])
    return (
        <>

        </>
    )
}

export default App
